<template>
	<view class="choose-page">
		<view v-if="addresses.length===0" class="empty">暂无收货地址，请先添加</view>
		<view v-else class="list">
			<view class="card" v-for="addr in addresses" :key="addr.id" @click="select(addr)">
				<view class="tag" v-if="addr.isDefault===1">默认</view>
				<view class="info">
					<view class="row">
						<text class="name">{{ addr.receiver }}</text>
						<text class="phone">{{ addr.phone }}</text>
					</view>
					<text class="detail">{{ formatAddress(addr) }}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="manage" @click="manage">管理地址</button>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'

export default {
	data(){ return { addresses: [] } },
	onShow(){ this.load(); },
	methods:{
		async load(){ try{ const r = await api.getAddresses(); if(r.code===0){ this.addresses = r.data||[]; } }catch{} },
		formatAddress(a){ return `${a.province||''}${a.city||''}${a.district||''}${a.detail||''}`; },
		select(addr){ const ec = this.getOpenerEventChannel && this.getOpenerEventChannel(); if(ec){ ec.emit('chooseAddress', addr); } uni.navigateBack(); },
		manage(){ uni.navigateTo({ url:'/pages/address/index' }); }
	}
}
</script>

<style>
.choose-page{ padding: 16rpx 16rpx 120rpx; }
.empty{ text-align:center; color:#888; padding: 40rpx 0; }
.list{ display:flex; flex-direction: column; gap: 16rpx; }
.card{ position:relative; background:#fff; border-radius: 18rpx; padding: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.06); }
.tag{ position:absolute; top:0; left:0; background:#ff9a45; color:#fff; padding: 6rpx 18rpx; border-top-left-radius:18rpx; border-bottom-right-radius:18rpx; font-size: 22rpx; }
.info{ padding-top: 18rpx; }
.row{ display:flex; justify-content: space-between; align-items:center; margin-bottom: 8rpx; }
.name{ font-size: 30rpx; font-weight: 600; color:#333; }
.phone{ font-size: 28rpx; color:#666; }
.detail{ font-size: 26rpx; color:#666; line-height: 1.5; }
.footer{ position:fixed; left:0; right:0; bottom: env(safe-area-inset-bottom); padding: 16rpx 16rpx calc(16rpx + env(safe-area-inset-bottom)); background:#fff; box-shadow: 0 -6rpx 20rpx rgba(0,0,0,.05); }
.manage{ width: 100%; border: 2rpx solid #ddd; border-radius: 999rpx; background:#fff; color:#333; padding: 18rpx 0; font-size: 28rpx; }
</style>

